<template>
  <view class="mt-20">
    <view class="p-lr-40 mb-20 color-888888">
      <view class="fz-30 lh-42  mt-20 flex justify-between align-center">
        <text class="w-200">维修工程师</text>
        <view class="flex1 text-right">
          <text>{{ workOrderInfo.repairStaff || '-' }}</text>
        </view>
      </view>
      <view class="fz-30 lh-42 mt-20 flex justify-between align-center">
        <text class="w-200">维修开始时间</text>
        <view class="flex1 text-right">
          <text>{{ workOrderInfo.startTime || '-' }}</text>
        </view>
      </view>
      <view class="fz-30 lh-42 mt-20 flex justify-between align-center">
        <text class="w-200">维修结束时间</text>
        <view class="flex1 text-right">
          <text>{{ workOrderInfo.endTime || '-' }}</text>
        </view>
      </view>

      <view class="fz-30 lh-42 mt-20 ">
        <text class="w-200">维修内容</text>
        <view v-if="workOrderInfo.content" class="mt-20">
          {{ workOrderInfo.content }}
        </view>
        <text v-else style="float: right">-</text>
      </view>

      <view class="fz-30 lh-42 mt-20">
        <text class="w-200">替换备件</text>
        <view v-if="workOrderInfo.recordPartList && workOrderInfo.recordPartList.length > 0">
          <u-collapse :accordion="false" :head-style="{ marginBottom: 0 + 'rpx' }">
            <template v-for="(item, index) in middleRecordPartList" ::key="index">
              <collapse-item v-if="item.countBarcode" @collapseDone="collapseDone(index)" :ref="'collapse' + index" open  >
                <template slot="title">
                  <view class="lh-45 flex justify-between align-center">
                    <view class="color-333333 font-bold fz-30 lh-45 flex align-center">
                      <view class="max-w-300 break-all">-{{ item.partName }}</view>
                      <text class="pl-115">
                        {{ `x${item.countNoBarcode+item.countBarcode}` }}
                        <text v-if="item.partList && item.partList.length > 0">
                          ({{ item.countNoBarcode || '0' }}+{{ item.countBarcode || '0' }})
                        </text>
                      </text>
                    </view>
                  </view>
                </template>

                <view class="bg-gray br-5 p-20 spare" v-if="item.partList && item.partList.length > 0">
                  <view class="p-tb-20 p-lr-20 flex bg-fff " :style="{'mb-20':cIdx!==item.partList.length}" v-for="(child, cIdx) in item.partList" :key="cIdx">
                    <view class="w-130 h-60 lh-60 text-center br-30 bg-FF9900 color-fff fz-28">
                      <text>{{ '-备件' + (cIdx + 1) }}</text>
                    </view>
                    <view class="fz-24 color-333333 ml-40">
                      <view>
                        {{ child.newSpareBarcode || '-' }}
                      </view>
                      <view class="color-888888">替换</view>
                      <view>
                        {{ child.oldSpareBarcode || '-' }}
                      </view>
                    </view>
                </view>
                </view>
                <view v-else></view>
              </collapse-item>
              <view v-else>
                <view class="lh-45 flex justify-between align-center pt-20 pb-30 border-bottom-CCCCCC">
                    <view class="color-333333 font-bold fz-30 lh-45 flex align-center">
                      <view class="max-w-300 break-all">-{{ item.partName }}</view>
                      <text class="pl-115">
                        {{ `x${item.countNoBarcode}` }}
                      </text>
                    </view>
                  </view>
              </view>
            </template>
          </u-collapse>

        </view>
        <text v-else style="float: right">-</text>
      </view>

      <view class="fz-30 lh-42 mt-20 pb-100">
        <text class="w-200">照片</text>
        <view class="flex mt-20 flex-wrap">
          <!-- 图片缩略图 -->
          <view class="relative mr-30"
            v-for="(item, index) in workOrderInfo.recordImageList" :key="index">
            <image class="h-150 w-150" :data-cur="item.url" :src="item.url" @tap="previewImage"/>
          </view>

          <view v-if="!workOrderInfo.recordImageList || workOrderInfo.recordImageList.length ===0"  class="w-150 h-150 bg-CCCCCC flex flex-column align-center justify-center">
            <image class="w-47 h-40" src="@/static/images/common/empty.png"></image>
            <text class="color-fff fz-24 lh-33 mt-10">暂无图片</text>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script >
import CollapseItem from "./CollapseItem.vue";

export default {
  name: "FixDetail",
  components: {
    CollapseItem
  },
  props: {
    workOrderInfo: {
      type: Object,
      default: {}
    }
  },
  computed: {
    middleRecordPartList() {
      return this.workOrderInfo.recordPartList
        .reduce((total, curr) => {
          const idx = total.findIndex(item => item.partId === curr.partId)
          if (idx === -1) {
            return [...total, {partId: curr.partId, partName: curr.partName, partList: [curr]}]
          } else {
            total[idx].partList.push(curr)
            return total
          }
        }, [])
        .map(item => {
          const haveCodeSpareList = item.partList.filter(item => item.newSpareBarcode !== null && item.oldSpareBarcode !== null)
          const countNoBarcode = item.partList.find(item => item.newSpareBarcode == null && item.oldSpareBarcode == null)?.operNum || 0
          return {
            partId: item.partId, // 备件id
            partName: item.partName, // 备件名称
            partList : haveCodeSpareList, // 已扫码备件列表
            countNoBarcode, // 未扫码数量
            countBarcode: haveCodeSpareList.length // 已扫码数量
          }
        })
    }
  },
  methods: {
    //等待所有折叠项展开后隐藏mask
    collapseDone (index) {
      if (index + 1 === this.workOrderInfo.recordPartList.length) {
        // this.isShowMask = false
      }
    },
    // 点击预览
    previewImage (e) {
      const current = e.currentTarget.dataset.cur;
      const urls = this.workOrderInfo.recordImageList.map(el => el.url);
      uni.previewImage({
        current: current,
        urls: urls,
        indicator: "none",
      });
    },
  },

}
</script>

<style>
</style>
